<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品开发文档："奇刷刷" 平台</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            line-height: 1.8;
            background: #f5f5f5;
            color: #333;
        }
        /* 侧边栏导航 */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 280px;
            height: 100vh;
            background: linear-gradient(180deg, #2C7A9F 0%, #1a5572 100%);
            overflow-y: auto;
            padding: 30px 20px;
            box-shadow: 2px 0 15px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: transform 0.3s ease;
        }
        .sidebar.collapsed {
            transform: translateX(-280px);
        }
        /* 侧边栏切换按钮 */
        .sidebar-toggle {
            position: fixed;
            left: 290px;
            top: 20px;
            width: 40px;
            height: 40px;
            background: #2C7A9F;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            font-size: 1.2em;
        }
        .sidebar-toggle:hover {
            background: #FF6B35;
            transform: scale(1.1);
        }
        .sidebar-toggle.collapsed {
            left: 10px;
        }
        /* 编辑模式按钮 */
        .edit-mode-toggle {
            position: fixed;
            right: 20px;
            top: 20px;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 1001;
            font-size: 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        .edit-mode-toggle:hover {
            background: #45a049;
            transform: translateY(-2px);
        }
        .edit-mode-toggle.active {
            background: #f44336;
        }
        /* 保存按钮 */
        .save-btn {
            position: fixed;
            right: 140px;
            top: 20px;
            padding: 10px 20px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 1001;
            font-size: 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            display: none;
        }
        .save-btn:hover {
            background: #0b7dda;
            transform: translateY(-2px);
        }
        .save-btn.show {
            display: block;
        }
        /* 可编辑内容样式 */
        .editable {
            outline: none;
            transition: all 0.3s ease;
            position: relative;
        }
        .editable:hover {
            background: rgba(76, 175, 80, 0.05);
            cursor: text;
        }
        .editable:focus {
            background: rgba(76, 175, 80, 0.1);
            border-left: 3px solid #4CAF50;
            padding-left: 12px;
        }
        /* 编辑提示 */
        .edit-hint {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(76, 175, 80, 0.95);
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            z-index: 1002;
            display: none;
            animation: slideIn 0.3s ease;
        }
        .edit-hint.show {
            display: block;
        }
        /* 富文本工具栏 */
        .editor-toolbar {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 10px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            z-index: 1003;
            display: none;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            max-width: 90%;
        }
        .editor-toolbar.show {
            display: flex;
        }
        .editor-toolbar button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            white-space: nowrap;
        }
        .editor-toolbar button:hover {
            background: #f0f0f0;
            border-color: #999;
        }
        .editor-toolbar button.active {
            background: #2C7A9F;
            color: white;
            border-color: #2C7A9F;
        }
        .toolbar-separator {
            width: 1px;
            height: 25px;
            background: #ddd;
            margin: 0 5px;
        }
        @media (max-width: 768px) {
            .editor-toolbar {
                bottom: 10px;
                padding: 8px 10px;
                gap: 5px;
            }
            .editor-toolbar button {
                padding: 6px 10px;
                font-size: 12px;
            }
            .toolbar-separator {
                display: none;
            }
        }
        @keyframes slideIn {
            from {
                transform: translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .sidebar::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }
        .sidebar-title {
            color: #fff;
            font-size: 1.4em;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255,255,255,0.3);
        }
        .nav-menu {
            list-style: none;
        }
        .nav-item {
            margin-bottom: 5px;
        }
        .nav-link {
            display: block;
            color: rgba(255,255,255,0.85);
            text-decoration: none;
            padding: 12px 15px;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-size: 0.95em;
        }
        .nav-link:hover {
            background: rgba(255,255,255,0.15);
            color: #fff;
            transform: translateX(5px);
        }
        .nav-link.active {
            background: rgba(255,107,53,0.9);
            color: #fff;
            font-weight: bold;
        }
        /* 主内容区 */
        .main-wrapper {
            margin-left: 280px;
            min-height: 100vh;
            transition: margin-left 0.3s ease;
        }
        .main-wrapper.expanded {
            margin-left: 0;
        }
        .container {
            background: white;
            padding: 50px 60px;
            margin: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #FF6B35;
            border-bottom: 3px solid #FF6B35;
            padding-bottom: 20px;
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            scroll-margin-top: 20px;
        }
        h2 {
            color: #2C7A9F;
            border-left: 5px solid #2C7A9F;
            padding-left: 15px;
            margin-top: 50px;
            margin-bottom: 30px;
            font-size: 2em;
            scroll-margin-top: 20px;
        }
        h3 {
            color: #4A90A4;
            font-size: 1.5em;
            margin-top: 35px;
            margin-bottom: 20px;
            scroll-margin-top: 20px;
        }
        h4 {
            color: #666;
            font-size: 1.2em;
            margin-top: 25px;
            margin-bottom: 15px;
            scroll-margin-top: 20px;
        }
        p {
            text-indent: 2em;
            margin: 15px 0;
            text-align: justify;
        }
        .highlight {
            background: #FFF3E0;
            padding: 20px;
            border-left: 4px solid #FF9800;
            margin: 20px 0;
        }
        /* 流程图样式 */
        .flowchart-container {
            background: #f9f9f9;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .flowchart-title {
            color: #2C7A9F;
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            text-indent: 0;
        }
        .mermaid {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 6px;
        }
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .sidebar {
                width: 240px;
            }
            .sidebar.collapsed {
                transform: translateX(-240px);
            }
            .sidebar-toggle {
                left: 250px;
            }
            .sidebar-toggle.collapsed {
                left: 10px;
            }
            .main-wrapper {
                margin-left: 240px;
            }
            .main-wrapper.expanded {
                margin-left: 0;
            }
            .container {
                padding: 40px 40px;
                margin: 20px;
            }
        }
        @media (max-width: 768px) {
            .sidebar {
                width: 280px;
                transform: translateX(-280px);
            }
            .sidebar.show {
                transform: translateX(0);
            }
            .sidebar-toggle {
                left: 10px;
            }
            .sidebar-toggle.show {
                left: 290px;
            }
            .main-wrapper {
                margin-left: 0;
            }
            .container {
                padding: 30px 20px;
                margin: 10px;
            }
            .edit-mode-toggle {
                top: 10px;
                right: 60px;
                padding: 8px 12px;
                font-size: 12px;
            }
            .save-btn {
                top: 10px;
                right: 10px;
                padding: 8px 12px;
                font-size: 12px;
            }
            .editor-toolbar {
                bottom: 10px;
                padding: 8px 10px;
                gap: 5px;
            }
            .editor-toolbar button {
                padding: 6px 10px;
                font-size: 12px;
            }
            .toolbar-separator {
                display: none;
            }
            .edit-hint {
                bottom: 80px;
                right: 10px;
                left: 10px;
                font-size: 12px;
                padding: 10px 15px;
            }
        }
        @media print {
            .sidebar {
                display: none;
            }
            .main-wrapper {
                margin-left: 0;
            }
            body {
                background: white;
            }
            .container {
                box-shadow: none;
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏切换按钮 -->
    <button class="sidebar-toggle" id="sidebarToggle" title="收起/展开侧边栏">
        ☰
    </button>
    
    <!-- 编辑模式按钮 -->
    <button class="edit-mode-toggle" id="editModeToggle" title="开启/关闭编辑模式">
        ✏️ 编辑模式
    </button>
    
    <!-- 保存按钮 -->
    <button class="save-btn" id="saveBtn" title="保存修改">
        💾 保存
    </button>
    
    <!-- 编辑提示 -->
    <div class="edit-hint" id="editHint">
        💡 编辑模式已开启，点击文字即可编辑
    </div>
    
    <!-- 富文本工具栏 -->
    <div class="editor-toolbar" id="editorToolbar">
        <button onclick="formatText('bold')" title="粗体"><b>B</b></button>
        <button onclick="formatText('italic')" title="斜体"><i>I</i></button>
        <button onclick="formatText('underline')" title="下划线"><u>U</u></button>
        <div class="toolbar-separator"></div>
        <button onclick="formatText('justifyLeft')" title="左对齐">≡</button>
        <button onclick="formatText('justifyCenter')" title="居中">≣</button>
        <button onclick="formatText('justifyRight')" title="右对齐">≡</button>
        <div class="toolbar-separator"></div>
        <button onclick="formatText('insertUnorderedList')" title="无序列表">• 列表</button>
        <button onclick="formatText('insertOrderedList')" title="有序列表">1. 列表</button>
        <div class="toolbar-separator"></div>
        <button onclick="insertLink()" title="插入链接">🔗 链接</button>
        <button onclick="changeColor()" title="文字颜色">🎨 颜色</button>
    </div>

    <!-- 左侧导航栏 -->
    <nav class="sidebar" id="sidebar">
        <div class="sidebar-title">📋 文档目录</div>
        <ul class="nav-menu">
            <li class="nav-item"><a href="#intro" class="nav-link">产品开发文档</a></li>
            <li class="nav-item"><a href="#section1" class="nav-link">一、引言</a></li>
            <li class="nav-item"><a href="#section2" class="nav-link">二、市场分析</a></li>
            <li class="nav-item"><a href="#section3" class="nav-link">三、产品规划</a></li>
            <li class="nav-item"><a href="#section4" class="nav-link">四、产品设计</a></li>
            <li class="nav-item"><a href="#section5" class="nav-link">五、技术方案</a></li>
            <li class="nav-item"><a href="#section6" class="nav-link">六、项目计划</a></li>
        </ul>
    </nav>

    <!-- 主内容区 -->
    <div class="main-wrapper">
        <div class="container">

<h1 id="intro">产品开发文档："奇刷刷" 平台</h1>
<h2 id="section1">一、引言</h2>
<h3>1.1 产品开发背景与目标</h3>
<p>在数字经济蓬勃发展的当下，中小微商家面临推广成本高、触达用户精准度不足的困境，而用户则缺乏便捷获取优质商家信息及合理回报的渠道。同时，现有推广平台存在任务同质化严重、奖励机制不透明、用户参与粘性低等问题。</p>
<p>“奇刷刷” 平台的开发目标在于搭建连接商家与用户的高效桥梁，为商家提供低成本、高转化的推广渠道，通过精准任务投放提升品牌曝光与产品销量；为用户打造多样化、高回报的任务参与场景，让用户在完成推广任务的过程中获得实实在在的奖励；最终构建一个商家、用户双赢的良性推广生态。</p>
<h3>1.2 产品概述</h3>
<p>“奇刷刷” 是一款聚焦本地生活服务与线上商品推广的任务型平台，核心功能涵盖商家任务发布、用户任务领取与完成、任务拼团、领主等级体系等模块。</p>
<p>平台用户群体主要分为三类：一是有推广需求的中小微商家、本地生活服务商户及线上电商卖家；二是活跃于各类社交平台、具备一定推广能力的 “发手” 用户；三是追求额外收益、乐于参与简单推广任务的普通用户。</p>
<p>业务模式以 “商家付费发任务、用户完成得奖励、平台监管抽成” 为核心，创新引入任务拼团机制与领主等级激励体系，相较于同类平台，具有任务匹配更精准、奖励机制更透明、用户粘性更强的竞争优势。</p>
<h3>1.3 文档目的与范围</h3>
<p>本文档旨在为 “奇刷刷” 平台的开发、测试、运营、维护等各环节相关人员提供清晰、统一的指导依据，明确产品需求与实现标准，确保项目有序推进。</p>
<p>文档涵盖范围包括平台的市场分析、产品规划、产品设计、技术方案、项目计划、测试计划、运营与推广、收益分析与商业模式、风险评估与应对等全流程内容，涉及各功能模块的具体需求、业务流程及实现要求。</p>
<h2 id="section2">二、市场分析</h2>
<h3>2.1 市场调研</h3>
<p>本次市场调研采用线上问卷、线下访谈、行业报告分析相结合的方法。线上通过第三方调研平台发放问卷 2000 份，回收有效问卷 1862 份；线下访谈中小微商家 80 家、各类用户 200 人；同时参考艾瑞咨询、易观分析等权威机构发布的推广行业报告。</p>
<p>调研数据显示，我国本地生活服务推广市场规模年均增长率保持在 15% 以上，线上商品推广市场规模更是突破万亿级别，市场增长潜力巨大。从竞争格局来看，当前市场虽有多个推广平台，但尚未形成绝对垄断，中低端市场竞争激烈但产品同质化严重。</p>
<p>用户需求痛点主要集中在：商家方面，希望降低推广成本、提高推广效果可量化性；“发手” 用户期待更多高回报、易操作的任务资源；普通用户则关注奖励发放的及时性与任务的趣味性。</p>
<h3>2.2 竞品分析</h3>
<p>选取当前市场上具有代表性的 A 平台、B 平台作为主要竞品进行分析。</p>
<p>A 平台优势在于入驻商家数量多，任务种类丰富，但存在任务审核流程繁琐、对中小商家收费过高、奖励提现门槛高的不足。B 平台以低门槛入驻吸引了大量中小商家，但其任务匹配精准度差，用户完成任务后奖励到账延迟问题突出，且缺乏有效的用户激励机制。</p>
<p>综合来看，“奇刷刷” 可借鉴 A 平台丰富的任务类型设计与 B 平台的低门槛入驻策略，同时针对两者在审核效率、收费标准、奖励机制、用户激励等方面的不足进行优化升级，打造差异化竞争优势。</p>
<h3>2.3 市场机会与风险</h3>
<p>市场机会方面，随着中小微企业数字化转型加速，其对精准推广的需求日益迫切，而现有平台难以充分满足；同时，年轻用户群体对 “任务赚钱” 模式接受度高，为平台提供了广阔的用户基础。此外，本地生活服务与线上商品的融合趋势，为平台打造多元化任务场景创造了条件。</p>
<p>风险主要包括：技术风险，平台需同时满足大量用户并发操作与数据安全存储，技术架构面临挑战；竞争风险，若头部平台推出类似功能，可能对项目造成冲击；市场接受度风险，用户与商家对新平台存在信任壁垒，初期推广难度较大。</p>
<p>应对策略：技术上组建专业研发团队，采用成熟稳定的技术架构，提前进行压力测试与安全防护设计；竞争方面强化差异化优势，快速迭代产品功能，建立用户与商家的品牌忠诚度；市场推广初期通过补贴活动与口碑传播打破信任壁垒，逐步提升市场认可度。</p>
<h2 id="section3">三、产品规划</h2>
<h3>3.1 产品定位</h3>
<p>“奇刷刷” 定位为专注于本地生活与线上商品推广的精准任务匹配平台，以 “高效推广、轻松赚钱” 为核心价值主张，连接有推广需求的商家与有赚钱需求的用户，通过大数据算法实现任务与用户的精准匹配，为商家提供低成本、高转化的推广服务，为用户提供高回报、易操作的任务资源。</p>
<h3>3.2 目标用户</h3>
<h4>商家用户</h4>
<p>特征：以中小微企业、本地餐饮、零售商户及线上中小电商为主，规模较小，推广预算有限，对推广效果要求高，注重成本控制。</p>
<p>需求：需要低成本、精准触达目标用户的推广渠道，希望推广效果可量化，能快速提升店铺客流量或商品销量。</p>
<h4>发手用户</h4>
<p>特征：年龄在 18-35 岁之间，活跃于微信、抖音、小红书等社交平台，具备一定的社交影响力与内容创作能力，时间相对自由，追求额外收入。</p>
<p>需求：渴望高收益、易完成的推广任务，需要便捷的任务管理工具与清晰的奖励结算机制，希望获得成长激励与资源倾斜。</p>
<h4>普通用户</h4>
<p>特征：年龄覆盖广泛，主要利用碎片化时间参与任务，社交影响力有限，对任务难度要求低，重视奖励的及时性与稳定性。</p>
<p>需求：需要简单易操作的任务类型，希望奖励兑换流程便捷，能通过轻松操作获得合理回报。</p>
<h3>3.3 产品功能规划</h3>
<h4>3.3.1 发手任务区</h4>
<p>商家登录平台后，进入 “任务发布” 模块，可根据推广需求选择任务类型（如朋友圈转发、短视频拍摄、商品测评等），设置任务要求、完成时限、奖励金额及目标用户画像（如年龄、地域、兴趣标签等）。平台通过算法对任务进行审核，审核通过后推送至符合条件的发手任务区。</p>
<p>发手可在任务区浏览任务详情，根据自身能力与兴趣领取任务。领取任务后需在规定时限内按照要求完成，上传任务成果（如转发截图、短视频链接等）。商家对任务成果进行验收，验收通过后，平台将奖励金额发放至发手账户。若验收不通过，发手可根据商家反馈进行修改后重新提交，修改次数不超过 2 次。奖励机制采用 “基础奖励 + 绩效奖励” 模式，基础奖励在任务验收通过后即时发放，绩效奖励根据任务推广效果（如点击量、转化率等）额外结算。</p>
<h4>3.3.2 任务大厅</h4>
<p>任务大厅按任务类型（本地生活、线上商品、品牌推广等）、奖励金额、完成难度进行分类展示，用户可通过筛选、搜索功能快速找到心仪任务。任务详情页清晰展示任务要求、完成流程、奖励金额、剩余数量及商家信息。</p>
<p>普通用户点击 “领取任务” 即可获取任务，按照页面指引完成操作后提交成果。平台采用系统初审 + 人工复核的方式对任务完成情况进行审核，审核通过后奖励即时到账至用户账户。奖励发放方式支持余额提现至银行卡、微信或支付宝，也可兑换平台合作商家的优惠券、商品等。</p>
<h4>3.3.3 任务拼团</h4>
<p>用户在任务大厅中看到带有 “拼团” 标识的任务时，可发起拼团或加入他人拼团，拼团人数设置为 2-5 人，拼团时限为 24 小时。拼团成功后，参与拼团的用户可获得额外的奖励补贴，补贴金额由平台与商家共同承担，其中平台承担 30%，商家承担 70%。</p>
<p>任务拼团流程为：用户发起拼团→分享拼团链接邀请好友→好友加入拼团→拼团成功后共同领取任务→各自完成任务并提交→审核通过后获得基础奖励 + 拼团补贴。若拼团失败，系统将自动取消任务领取，已冻结的任务资格即时释放。任务拼团可显著提升任务参与人数与推广覆盖面，同时降低商家单个任务的推广成本，增加平台用户活跃度。</p>
<h4>3.3.4 领主系统</h4>
<p>领主等级划分为青铜领主、白银领主、黄金领主、铂金领主、钻石领主五个等级，等级晋升依据用户的任务完成量、任务完成质量、邀请好友数量及团队活跃度综合判定。</p>
<p>领主收益来源包括自身完成任务的奖励提成（青铜领主提成 5%，等级每提升一级提成增加 3%，钻石领主提成 20%）、邀请好友完成任务的奖励分成（好友完成任务奖励的 10%-15%）及团队整体任务完成量的月度奖金。</p>
<p>升级方式为：用户完成指定数量的高质量任务后可晋升为青铜领主；后续各等级晋升需满足累计任务完成量、邀请有效好友数量、团队月任务完成总额等条件，同时任务完成质量评分需达到 85 分以上。领主可获得专属任务优先领取权、客服一对一服务、线下沙龙参与资格等额外权益。</p>
<h2 id="section4">四、产品设计</h2>
<h3>4.1 功能设计</h3>
<h4>商家任务发布与审核流程</h4>
<p>商家登录→进入任务发布页面→填写任务信息（类型、要求、时限、奖励等）→提交审核→平台算法初审（匹配度、合规性）→人工复核→审核通过（推送至对应任务区）/ 审核不通过（反馈修改意见）。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 商家任务发布与审核流程图</div>
    <div class="mermaid">
        graph TD
            A[商家登录] --> B[进入任务发布页面]
            B --> C[填写任务信息]
            C --> D{任务类型/要求/时限/奖励}
            D --> E[提交审核]
            E --> F[平台算法初审]
            F --> G{匹配度与合规性检查}
            G --> H[人工复核]
            H --> I{审核结果}
            I -->|通过| J[推送至对应任务区]
            I -->|不通过| K[反馈修改意见]
            K --> B
            J --> L[任务上线成功]
            
            style A fill:#e1f5ff
            style J fill:#c8e6c9
            style K fill:#ffcdd2
            style L fill:#81c784
    </div>
</div>
<h4>发手任务领取与结算流程</h4>
<p>发手登录→浏览发手任务区→筛选并领取任务→按要求完成任务→上传成果→商家验收→验收通过（奖励到账）/ 验收不通过（修改后重新提交）→申请提现→平台审核→资金到账。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 发手任务领取与结算流程图</div>
    <div class="mermaid">
        graph TD
            A[发手登录] --> B[浏览发手任务区]
            B --> C[筛选并领取任务]
            C --> D[按要求完成任务]
            D --> E[上传成果]
            E --> F[商家验收]
            F --> G{验收结果}
            G -->|通过| H[基础奖励到账]
            G -->|不通过| I[修改后重新提交]
            I --> |修改次数≤2次| E
            I --> |超过2次| J[任务失败]
            H --> K[绩效奖励结算]
            K --> L[申请提现]
            L --> M[平台审核]
            M --> N[资金到账]
            
            style A fill:#e1f5ff
            style H fill:#fff9c4
            style K fill:#c8e6c9
            style N fill:#81c784
            style J fill:#ffcdd2
    </div>
</div>
<h4>普通用户任务参与流程</h4>
<p>用户登录→进入任务大厅→筛选 / 搜索任务→领取任务→完成任务并提交成果→系统初审→人工复核→审核通过（奖励到账）→奖励兑换 / 提现。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 普通用户任务参与流程图</div>
    <div class="mermaid">
        graph TD
            A[用户登录] --> B[进入任务大厅]
            B --> C{筛选/搜索任务}
            C --> D[查看任务详情]
            D --> E[领取任务]
            E --> F[完成任务]
            F --> G[提交成果]
            G --> H[系统初审]
            H --> I[人工复核]
            I --> J{审核结果}
            J -->|通过| K[奖励到账]
            J -->|不通过| L[反馈修改]
            L --> F
            K --> M{选择奖励方式}
            M -->|提现| N[提现到账户]
            M -->|兑换| O[兑换优惠券/商品]
            
            style A fill:#e1f5ff
            style K fill:#fff9c4
            style N fill:#81c784
            style O fill:#81c784
    </div>
</div>
<h4>任务拼团流程</h4>
<p>用户发现拼团任务→发起 / 加入拼团→邀请好友→拼团成功→领取任务→完成任务提交→审核通过→获得奖励 + 补贴→拼团失败→任务资格释放。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 任务拼团流程图</div>
    <div class="mermaid">
        graph TD
            A[用户发现拼团任务] --> B{选择操作}
            B -->|发起拼团| C[创建拼团]
            B -->|加入拼团| D[加入他人拼团]
            C --> E[分享拼团链接]
            E --> F[邀请好友加入]
            D --> G{拼团人数}
            F --> G
            G -->|2-5人内| H{拼团时限24小时}
            H -->|时间内凑齐| I[拼团成功]
            H -->|时间到未凑齐| J[拼团失败]
            I --> K[所有成员领取任务]
            K --> L[各自完成任务]
            L --> M[提交任务成果]
            M --> N[审核通过]
            N --> O[获得基础奖励]
            O --> P[获得拼团补贴]
            P --> Q[平台30% + 商家70%]
            J --> R[任务资格释放]
            
            style A fill:#e1f5ff
            style I fill:#c8e6c9
            style P fill:#fff9c4
            style Q fill:#81c784
            style J fill:#ffcdd2
            style R fill:#ffcdd2
    </div>
</div>
<h4>领主等级晋升流程</h4>
<p>用户满足青铜领主条件→系统自动晋升→解锁对应权益→达成更高等级条件→提交晋升申请→平台审核→晋升成功 / 驳回（反馈原因）。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 领主等级晋升流程图</div>
    <div class="mermaid">
        graph TD
            A[普通用户] --> B{完成指定数量高质量任务}
            B -->|达标| C[自动晋升青铜领主]
            C --> D[解锁青铜权益<br/>提成5%]
            D --> E{继续完成任务}
            E --> F{满足晋升条件}
            F -->|任务量+好友数+团队额度| G[提交晋升申请]
            G --> H[平台审核]
            H --> I{质量评分≥85分}
            I -->|通过| J{晋升等级}
            I -->|不通过| K[反馈原因]
            K --> E
            J --> L[白银领主<br/>提成8%]
            J --> M[黄金领主<br/>提成11%]
            J --> N[铂金领主<br/>提成14%]
            J --> O[钻石领主<br/>提成17%]
            L & M & N & O --> P[解锁专属权益]
            P --> Q[优先领取+专属客服+线下沙龙]
            
            style A fill:#e1f5ff
            style C fill:#cd7f32
            style L fill:#c0c0c0
            style M fill:#ffd700
            style N fill:#e5e4e2
            style O fill:#b9f2ff
            style K fill:#ffcdd2
    </div>
</div>
<h3>4.2 交互设计</h3>
<p>平台交互设计遵循 “简洁直观、高效便捷” 的原则，确保不同类型用户都能快速上手操作。</p>
<p>关键页面原型图设计如下：</p>
<p>登录页：采用手机号 + 验证码 / 密码登录方式，设有 “忘记密码”“注册” 入口，页面底部展示用户协议与隐私政策链接。</p>
<p>商家任务发布页：采用分步填写模式，每一步均有清晰的填写提示与示例，实时显示任务预算与预计推广效果，提交按钮固定在页面底部。</p>
<p>任务大厅页：顶部设有搜索框与分类筛选栏，任务卡片展示核心信息（任务名称、奖励、难度、剩余量），卡片右下角设有 “领取”/“拼团” 按钮，支持下拉刷新与上拉加载更多。</p>
<p>个人中心页：按 “我的任务”“我的奖励”“领主中心”“设置” 等模块分区展示，各模块入口清晰，奖励金额与提现按钮突出显示。</p>
<p>用户操作流程设计中，减少不必要的跳转步骤，关键操作（如任务领取、提交、提现）设置明确的成功提示，同时提供操作指引与常见问题解答入口。</p>
<h3>4.3 视觉设计</h3>
<p>平台整体视觉风格采用简约现代风，主色调选用橙色与蓝色搭配，橙色象征活力与收益，传递 “轻松赚钱” 的理念；蓝色代表专业与可靠，增强用户与商家的信任感。</p>
<p>页面布局采用卡片式设计，信息层级清晰，重要信息（如奖励金额、任务截止时间）采用加粗、放大字体或特殊颜色突出显示。图标设计统一采用线性风格，简洁易懂，提升页面整体协调性。</p>
<p>针对不同用户群体优化视觉呈现：商家端侧重功能模块的清晰划分与数据可视化展示；用户端强化任务信息的直观呈现与操作按钮的便捷性；领主专属页面增加尊贵感元素，如专属标识、渐变背景等。</p>
<h2 id="section5">五、技术方案</h2>
<h3>5.1 技术架构</h3>
<p>采用微服务架构，整体分为前端层、API 网关层、业务服务层、数据层、基础设施层五个层次。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 微服务技术架构图</div>
    <div class="mermaid">
        graph TB
            subgraph 前端层
                A1[iOS App] 
                A2[Android App]
                A3[Web 端]
            end
            
            subgraph API网关层
                B[API Gateway<br/>路由/负载/限流/熔断]
            end
            
            subgraph 业务服务层
                C1[用户服务]
                C2[商家服务]
                C3[任务服务]
                C4[支付服务]
                C5[领主服务]
                C6[消息服务]
            end
            
            subgraph 数据层
                D1[(MySQL<br/>关系型数据库)]
                D2[(MongoDB<br/>非关系型数据库)]
                D3[Redis<br/>缓存]
                D4[RabbitMQ<br/>消息队列]
                D5[数据仓库<br/>分析挖掘]
            end
            
            subgraph 基础设施层
                E1[Docker容器]
                E2[Kubernetes编排]
                E3[云服务器]
            end
            
            A1 & A2 & A3 --> B
            B --> C1 & C2 & C3 & C4 & C5 & C6
            C1 & C2 & C3 --> D1
            C3 & C4 --> D2
            C1 & C2 & C3 & C4 & C5 --> D3
            C3 & C4 & C5 & C6 --> D4
            D1 & D2 --> D5
            C1 & C2 & C3 & C4 & C5 & C6 -.运行于.-> E1
            E1 -.编排管理.-> E2
            E2 -.部署于.-> E3
            
            style B fill:#FF6B35
            style D3 fill:#ff9800
            style D4 fill:#ffc107
            style E2 fill:#2196f3
    </div>
</div>

<p>前端层：负责用户界面展示与交互，支持 iOS、Android 移动端及 Web 端。</p>
<p>API 网关层：统一接口入口，负责请求路由、负载均衡、权限校验、限流熔断等功能。</p>
<p>业务服务层：按功能模块拆分为用户服务、商家服务、任务服务、支付服务、领主服务等微服务，各服务独立部署、协同工作。</p>
<p>数据层：包含关系型数据库（存储用户、商家、任务等核心数据）、非关系型数据库（存储任务成果、日志等非结构化数据）、缓存（提升热点数据访问速度）、数据仓库（用于数据分析与挖掘）。</p>
<p>基础设施层：提供服务器、存储、网络等基础资源，结合容器化技术（Docker）与编排工具（Kubernetes）实现资源的动态调度与管理，采用云服务保障系统弹性扩展能力。</p>
<p>技术选型上，后端核心框架选用 Spring Cloud Alibaba，确保微服务的高效协同；数据库采用 MySQL（关系型）与 MongoDB（非关系型）结合的方式；缓存选用 Redis；消息队列采用 RabbitMQ，处理异步任务与系统解耦。</p>
<h3>5.2 开发语言与工具</h3>
<h4>开发语言</h4>
<p>后端：Java（主导语言，成熟稳定，生态完善，适合微服务开发）、Go（用于高性能服务模块，如 API 网关、数据处理）。</p>
<p>前端：Vue.js（Web 端，组件化开发效率高）、Flutter（移动端，实现跨平台开发，降低维护成本）。</p>
<p>数据处理：Python（用于数据分析、算法模型训练）。</p>
<h4>开发工具与环境</h4>
<p>代码管理：Git + GitLab，实现版本控制与团队协作。</p>
<p>项目管理：Jira，用于任务分配、进度跟踪与缺陷管理。</p>
<p>开发工具：IntelliJ IDEA（Java 开发）、VS Code（前端开发）、PyCharm（Python 开发）。</p>
<p>测试工具：JUnit（单元测试）、Postman（接口测试）、JMeter（性能测试）、Selenium（自动化测试）。</p>
<p>部署工具：Jenkins（持续集成 / 持续部署）、Docker、Kubernetes。</p>
<p>选择以上语言与工具的主要原因在于其技术成熟度高、社区支持完善、团队适配性好，能够满足平台高性能、高可用、可扩展的需求，同时提升开发效率与项目管理水平。</p>
<h3>5.3 数据库设计</h3>
<p>数据库 ER 图主要包含用户表、商家表、任务表、任务成果表、奖励表、领主表、拼团表等核心实体，各实体间存在关联关系：用户表与任务表为多对多关系（通过用户任务关联表实现）；商家表与任务表为一对多关系；用户表与领主表为一对一关系；用户表与拼团表为多对多关系（通过拼团用户关联表实现）。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 数据库 ER 关系图</div>
    <div class="mermaid">
        erDiagram
            USER ||--o{ TASK_RELATION : "完成"
            USER ||--|| LORD : "晋升为"
            USER ||--o{ GROUP_USER : "参与"
            USER ||--o{ REWARD : "获得"
            MERCHANT ||--o{ TASK : "发布"
            TASK ||--o{ TASK_RELATION : "被领取"
            TASK ||--o{ TASK_RESULT : "提交成果"
            TASK ||--o{ REWARD : "产生奖励"
            TASK ||--|| GROUP_BUY : "支持拼团"
            GROUP_BUY ||--o{ GROUP_USER : "包含用户"
            TASK_RESULT }o--|| USER : "属于用户"
            TASK_RESULT }o--|| TASK : "属于任务"
            
            USER {
                int user_id PK
                string phone
                string password
                string user_type
                datetime register_time
                string avatar
                string nickname
                decimal balance
            }
            
            MERCHANT {
                int merchant_id PK
                string license_no
                string contact
                string phone
                string shop_name
                string shop_type
                string address
                decimal balance
            }
            
            TASK {
                int task_id PK
                int merchant_id FK
                string task_name
                string task_type
                text requirements
                datetime deadline
                decimal reward
                string target_users
                string status
            }
            
            TASK_RESULT {
                int result_id PK
                int task_id FK
                int user_id FK
                text content
                datetime submit_time
                string audit_status
            }
            
            REWARD {
                int reward_id PK
                int user_id FK
                int task_id FK
                decimal amount
                decimal subsidy
                string status
                datetime grant_time
            }
            
            LORD {
                int lord_id PK
                int user_id FK
                string level
                int task_count
                int invite_count
                decimal team_activity
                datetime promotion_time
            }
            
            GROUP_BUY {
                int group_id PK
                int task_id FK
                int initiator_id FK
                int max_users
                int current_users
                string status
                datetime start_time
                datetime end_time
            }
    </div>
</div>

<p>主要表结构设计如下：</p>
<p>用户表（user）：包含用户 ID、手机号、密码（加密存储）、用户类型、注册时间、头像、昵称、状态、余额等字段。</p>
<p>商家表（merchant）：包含商家 ID、营业执照编号、联系人、手机号、店铺名称、店铺类型、地址、资质状态、账户余额等字段。</p>
<p>任务表（task）：包含任务 ID、商家 ID、任务名称、任务类型、任务要求、完成时限、奖励金额、目标用户画像、任务状态、发布时间等字段。</p>
<p>任务成果表（task_result）：包含成果 ID、任务 ID、用户 ID、成果内容、提交时间、审核状态、审核意见、审核时间等字段。</p>
<p>奖励表（reward）：包含奖励 ID、用户 ID、任务 ID、奖励金额、补贴金额、发放状态、发放时间、提现状态、提现时间等字段。</p>
<p>领主表（lord）：包含领主 ID、用户 ID、等级、累计任务量、邀请好友数、团队活跃度、晋升时间、权益状态等字段。</p>
<p>拼团表（group_buy）：包含拼团 ID、任务 ID、发起用户 ID、拼团人数、当前人数、拼团状态、开始时间、结束时间等字段。</p>
<p>各表均设置主键与必要的外键约束，对敏感字段（如密码）进行加密处理，同时建立合理的索引以提升查询效率。</p>
<h2 id="section6">六、项目计划</h2>
<h3>6.1 项目阶段划分</h3>
<p>项目划分为需求分析与规划、产品设计、技术开发、测试优化、上线筹备、正式上线及运营迭代七个阶段。</p>

<div class="flowchart-container">
    <div class="flowchart-title">📊 项目开发阶段流程图</div>
    <div class="mermaid">
        graph LR
            A[需求分析与规划] --> B[产品设计]
            B --> C[技术开发]
            C --> D[测试优化]
            D --> E[上线筹备]
            E --> F[正式上线]
            F --> G[运营迭代]
            G -.持续优化.-> C
            
            A1[市场调研<br/>竞品分析<br/>需求确认] -.-> A
            B1[功能设计<br/>交互设计<br/>视觉设计] -.-> B
            C1[架构搭建<br/>数据库设计<br/>模块开发] -.-> C
            D1[功能测试<br/>性能测试<br/>兼容性测试] -.-> D
            E1[服务器部署<br/>数据初始化<br/>运营策划] -.-> E
            F1[全量上线<br/>系统监控<br/>问题处理] -.-> F
            G1[用户反馈<br/>数据分析<br/>功能迭代] -.-> G
            
            style A fill:#e1f5ff
            style B fill:#fff9c4
            style C fill:#c8e6c9
            style D fill:#ffccbc
            style E fill:#d1c4e9
            style F fill:#81c784
            style G fill:#ff9800
    </div>
</div>

<p>需求分析与规划阶段：明确产品核心需求，完成市场调研与竞品分析，制定产品规划与项目计划。</p>
<p>产品设计阶段：完成功能设计、交互设计、视觉设计，输出设计文档与原型图。</p>
<p>技术开发阶段：搭建技术架构，进行数据库设计，实现各功能模块的编码开发。</p>
<p>测试优化阶段：开展功能测试、性能测试、兼容性测试等，修复缺陷并优化产品体验。</p>
<p>上线筹备阶段：完成服务器部署、数据初始化、运营活动策划、客服培训等工作。</p>
<p>正式上线阶段：平台全量上线，监控系统运行状态，及时处理上线初期问题。</p>
<p>运营迭代阶段：收集用户与商家反馈，分析运营数据，持续优化产品功能与服务。</p>

</div>

    <script>
        // 初始化 Mermaid
        mermaid.initialize({ 
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            er: {
                useMaxWidth: true
            }
        });

        // 侧边栏切换功能
        const sidebarToggle = document.getElementById('sidebarToggle');
        const sidebar = document.getElementById('sidebar');
        const mainWrapper = document.querySelector('.main-wrapper');
        
        sidebarToggle.addEventListener('click', function() {
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile) {
                sidebar.classList.toggle('show');
                sidebarToggle.classList.toggle('show');
            } else {
                sidebar.classList.toggle('collapsed');
                sidebarToggle.classList.toggle('collapsed');
                mainWrapper.classList.toggle('expanded');
            }
            
            // 更新按钮图标
            if (sidebar.classList.contains('collapsed') || !sidebar.classList.contains('show')) {
                sidebarToggle.innerHTML = '☰';
            } else {
                sidebarToggle.innerHTML = '✕';
            }
        });

        // 响应式处理
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                sidebar.classList.remove('show');
                sidebarToggle.classList.remove('show');
            }
        });

        // 编辑模式功能
        const editModeToggle = document.getElementById('editModeToggle');
        const saveBtn = document.getElementById('saveBtn');
        const editHint = document.getElementById('editHint');
        const editorToolbar = document.getElementById('editorToolbar');
        let isEditMode = false;

        editModeToggle.addEventListener('click', function() {
            isEditMode = !isEditMode;
            
            if (isEditMode) {
                enableEditMode();
                editModeToggle.classList.add('active');
                editModeToggle.innerHTML = '🔒 锁定模式';
                saveBtn.classList.add('show');
                editorToolbar.classList.add('show');
                editHint.classList.add('show');
                setTimeout(() => {
                    editHint.classList.remove('show');
                }, 3000);
            } else {
                disableEditMode();
                editModeToggle.classList.remove('active');
                editModeToggle.innerHTML = '✏️ 编辑模式';
                saveBtn.classList.remove('show');
                editorToolbar.classList.remove('show');
                editHint.classList.remove('show');
            }
        });

        function enableEditMode() {
            // 使所有段落和标题可编辑（除了流程图）
            const editableElements = document.querySelectorAll('p, h1, h2, h3, h4');
            editableElements.forEach(el => {
                // 跳过流程图标题
                if (!el.classList.contains('flowchart-title') && !el.closest('.flowchart-container')) {
                    el.contentEditable = 'true';
                    el.classList.add('editable');
                }
            });
        }

        function disableEditMode() {
            const editableElements = document.querySelectorAll('.editable');
            editableElements.forEach(el => {
                el.contentEditable = 'false';
                el.classList.remove('editable');
            });
        }

        // 保存功能
        saveBtn.addEventListener('click', function() {
            if (confirm('确定要保存修改吗？这将更新HTML文件内容。')) {
                saveContent();
            }
        });

        function saveContent() {
            const htmlContent = document.documentElement.outerHTML;
            
            // 创建一个下载链接
            const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '产品开发文档-奇刷刷平台.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            alert('✅ 文件已下载！请用下载的文件替换原文件。\n\n提示：由于浏览器安全限制，无法直接覆盖本地文件，您需要手动替换。');
        }

        // 富文本编辑功能
        function formatText(command) {
            document.execCommand(command, false, null);
        }

        function insertLink() {
            const url = prompt('请输入链接地址:', 'https://');
            if (url) {
                document.execCommand('createLink', false, url);
            }
        }

        function changeColor() {
            const color = prompt('请输入颜色代码 (例如: #FF6B35 或 red):', '#FF6B35');
            if (color) {
                document.execCommand('foreColor', false, color);
            }
        }

        // 监听选中文本事件，显示工具栏提示
        document.addEventListener('selectionchange', function() {
            if (isEditMode) {
                const selection = window.getSelection();
                if (selection.toString().length > 0) {
                    // 可以在这里添加更多交互
                }
            }
        });

        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (isEditMode) {
                // Ctrl/Cmd + S 保存
                if ((e.ctrlKey || e.metaKey) && e.key === 's') {
                    e.preventDefault();
                    if (confirm('确定要保存修改吗？')) {
                        saveContent();
                    }
                }
                // Ctrl/Cmd + B 粗体
                if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
                    e.preventDefault();
                    formatText('bold');
                }
                // Ctrl/Cmd + I 斜体
                if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
                    e.preventDefault();
                    formatText('italic');
                }
                // Ctrl/Cmd + U 下划线
                if ((e.ctrlKey || e.metaKey) && e.key === 'u') {
                    e.preventDefault();
                    formatText('underline');
                }
            }
        });

        // 平滑滚动
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
                
                // 移除所有active类
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                // 添加active类到当前链接
                this.classList.add('active');
            });
        });

        // 滚动时高亮当前章节
        window.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('h2[id]');
            let currentSection = '';
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const scrollPosition = window.pageYOffset + 100;
                
                if (scrollPosition >= sectionTop) {
                    currentSection = section.getAttribute('id');
                }
            });
            
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + currentSection) {
                    link.classList.add('active');
                }
            });
        });

        // 页面加载时高亮第一个链接
        window.addEventListener('load', function() {
            document.querySelector('.nav-link').classList.add('active');
        });
    </script>
</div>
</body>
</html>